<template>
	<div class="register">
		<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
			<el-form-item label="手机号" prop="telephone">
				<el-input type="telephone" v-model="ruleForm2.telephone" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="短信验证码" prop="shapecode">
				<div style="display:flex;">
					<el-input type="shapecode" v-model="ruleForm2.shapecode" auto-complete="off" style="margin-right:10px;"></el-input>
					<el-button v-if="showGetCode" style="width:112px;" :disabled=true>
						{{downNum}}s
					</el-button>
					<el-tooltip v-else :content="codeContent" placement="bottom" effect="light" v-bind:open-delay=500>
						<el-button @click="getIphoneCode">
							获取验证码
						</el-button>
					</el-tooltip>
				</div>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model.number="ruleForm2.password"></el-input>
			</el-form-item>
			<el-form-item>

				<el-dialog title="提示" width='80%' :visible.sync="flag">
					<div class="tit">
						<i class="el-icon-warning"></i>
						<p> {{titContent}}</p>
					</div>
				</el-dialog>
				<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
				
				<el-button @click="resetForm('ruleForm2')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import {
		setInterval,
		clearInterval
	} from 'timers';
	export default {
		name: 'register',
		data() {
			var checkPhone = (rule, value, callback) => {
				if(value) {
					var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
					if(myreg.test(value)) {
						callback()
					} else {
						this.ruleForm2.telephone = '';
						callback(new Error('请输入正确的手机格式'))
					}
				} else {
					callback(new Error('手机号不能为空'));
				}
			};
			return {
				codeContent: '', // 获取验证码错误提示
				titContent: '', // 提交时错误提示
				showGetCode: false, // 是否显示获取验证码按钮
				downNum: 60, // 验证码倒计时
				flag: false,
				ruleForm2: {
					password: '',
					telephone: '',
					shapecode: ''
				},
				rules2: {
					telephone: [{
						validator: checkPhone,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			goStartUpload() {
				// 跳回 startUpload 页面
				var url1 = encodeURIComponent(window.location.href.split('#')[0] + '#/startUpload')
					//var url1 = encodeURIComponent('http://mobile.bosafe.com/game/#/startUpload')
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf873bd7fdb2bd0be&redirect_uri=' + url1 + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
			},
			goNews() {
				var url1 = encodeURIComponent(window.location.href.split('#')[0] + '#/news')
					//var url1 = encodeURIComponent('http://mobile.bosafe.com/game/#/news')
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf873bd7fdb2bd0be&redirect_uri=' + url1 + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
			},
			getIphoneCode() {
				let that = this
					// 获取验证码
				$.ajax({
					url: 'http://wx-api.1safety.cc/api/auth/code',
					type: 'get',
					data: {
						'phone': this.ruleForm2.telephone
					},
					dataType: 'json',
					async: true,
					contentType: 'application/x-www-form-urlencoded;charset=utf-8',
					timeout: 30000,
					success: function(data) {
						if(data != null && data.code != null && data.code == 200) {
							that.showGetCode = true
							let intervalTime = null
							intervalTime = setInterval(() => {
								that.downNum--;
								if(that.downNum === 0) {
									that.showGetCode = false
									that.downNum = 60
									clearInterval(intervalTime)
								}
							}, 1000)
						} else {
							that.codeContent = data.message
						}
					}
				})
			},
			submitForm() {
				let that = this
				var code = window.location.href.split('&')[0].split('=')[1]
				var state = window.location.href.split('state=')[1]
					// 注册
				$.ajax({
					url: 'http://wx-api.1safety.cc/api/auth/register',
					type: 'get',
					data: {
						'code': code,
						'telephone': this.ruleForm2.telephone,
						'password': this.ruleForm2.password,
						'shapecode': this.ruleForm2.shapecode,
						'platid': 1
					},
					dataType: 'json',
					async: true,
					contentType: 'application/x-www-form-urlencoded;charset=utf-8',
					timeout: 30000,
					success: function(data) {
						if(data != null && data.code != null && data.code == 200) {
							if(state == 1) {
								that.goNews()
							} else {
								that.goStartUpload()
							}

						} else {
							that.titContent = data.message
							that.flag = true
						}
					}
				})
			},
			resetForm() {
				// 重置
				this.ruleForm2 = {
					password: '',
					telephone: '',
					shapecode: ''
				}
			}
		}
	}
</script>
<style>
	.register {
		padding: 20px 10px;
		.tit {
			height: 6rem;
			display: flex;
			align-items: center;
			p {
				font-size: 16px;
				font-weight: 800;
			}
			i {
				color: red;
				font-size: 30px;
				padding: 0 2rem 0 3rem;
			}
		}
	}
</style>